Cards

Cards

Cards are used to apply a container around a related grouping of information.

Base

Preview

No content has been added for this component.

No content has been added for this component.

<article class="slds-card">
  <div class="slds-card__header slds-grid">
    <header class="slds-media slds-media_center slds-has-flexi-truncate">
      <div class="slds-media__figure">
        <span class="slds-icon_container slds-icon-standard-contact" title="description of icon when needed">
          <svg class="slds-icon slds-icon_small" aria-hidden="true">
            <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#contact"></use>
          </svg>
        </span>
      </div>
      <div class="slds-media__body">
        <h2>
          <a href="javascript:void(0);" class="slds-card__header-link slds-truncate" title="[object Object]">
            <span class="slds-text-heading_small">Card Header</span>
          </a>
        </h2>
      </div>
    </header>
    <div class="slds-no-flex">
      <button class="slds-button slds-button_neutral">New</button>
    </div>
  </div>
  <div class="slds-card__body slds-card__body_inner">Card Body (custom goes in here)</div>
  <footer class="slds-card__footer">Card Footer</footer>
</article>

About Base

The base card is used primarily on desktop within a “wide” column or “main content area”, which uses two-thirds of the viewport. In addition, the .slds-card class is used for layout purposes when a card has an adjacent card, those proceeding the initial will provide margin to give the cards spacing between each other.


About Cards

To initialize a card, apply the .slds-card class to a containing <article>. A card is made up of three sections, a header, a body, and a footer. The card header will get the .slds-card__header class. The card body will get the .slds-card__body class. The card footer will get the .slds-card__footer class.


Overview of CSS Classes

Selector.slds-card
Summary

Initializes card

Restrictarticle, div
VariantTrue
Selector.slds-card__header
Summary

Initializes card header

Restrict.slds-card div
Selector.slds-card__body
Summary

Initializes card body

Restrict.slds-card div
Selector.slds-card__footer
Summary

Initializes card footer

Restrict.slds-card footer